<template>
	<view>
		<view class="name">{{details.name}}</view>
		<image :src="details.img" mode=""></image>
		
		你当前距离{{details.name}}有{{dis}}km
		<button style="width: fit-content;" @tap="setLine">到{{details.name}}去</button>
	</view>
</template>

<script setup>
	import {
		onLoad
	} from "@dcloudio/uni-app"
	import {
		ref
	} from 'vue'
	import {
		CONFIG
	} from "../../utils/config"
	
	import{getMapDistance} from"/utils/tools.js"
	import { userStore } from "../../store/userStore.js"
	const store=userStore()
	
	onLoad((data)=>{
		
		console.log(data.id)
		getDetails((data.id))
	})
	
	let details=ref({})
	
	let dis= ref()
	async function getDetails(id){
		let res = await uni.$get(CONFIG.leanCloud_url+"/1.1/classes/SecicItem/"+id)
		console.log(res)
		if(res.statusCode == 200){
			details.value = res.data
		
		details.value=res.data
		
		console.log(store.currentPos)
		
		console.log(details.value.lon,details.value.lat)
		 dis.value=getMapDistance(details.value.lat,details.value.lon,store.currentPos.latitude,store.currentPos.longitude)
		}
	}
	
	function setLine(){
		uni.navigateTo({
			url:`/pages/playWebView/playWebView?slat=${store.currentPos.latitude}&slon=${store.currentPos.longitude}&elat=${details.value.lat}&elon=${details.value.lon}&name=${details.value.name}`
		})
	}
</script>

<style>

</style>
